<template>
	<view class="container">
		<view class="tui-banner-swiper">
			<swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false" autoplay :interval="4000"
			 :duration="150">
				<block v-for="(item,index) in background" :key="index">
					<swiper-item>
						<view class="tui-swiper-item tui-banner__height" :class="[item]">Thor UI</view>
					</swiper-item>
				</block>
			</swiper>
			<!--实际使用按需传入props，此处只为演示-->
			<tui-swiper-dot :type="type" :count="count" :current="current" :currentTitle="currentTitle" :left="left" :right="right"
			 :bottom="bottom" :width="width" :height="height" :radius="radius" :backgroundColor="backgroundColor" :activeBgColor="activeBgColor"
			 :color="color" :activeColor="activeColor" :size="size" :margin="margin" :padding="padding"></tui-swiper-dot>
		</view>
		<view class="tui-page__bd ">
			<tui-list-cell :size="28" :hover="false" color="#999" :lineLeft="false">
				切换指示点样式
			</tui-list-cell>
			<radio-group @change="radioChange">
				<block v-for="(item,index) in typeArr" :key="index">
					<tui-list-cell padding="0">
						<label class="thorui-flex__between">
							<view>{{item}}</view>
							<view class="thorui-checkmark thorui-primary">
								<radio :value="index.toString()"></radio>
							</view>
						</label>
					</tui-list-cell>
				</block>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['tui-bg__primary', 'tui-bg__green', 'tui-bg__white'],
				typeArr: ["round", "round无圆角", "nav", "indexes", "固定右侧indexes", "改变颜色"],
				current: 0,
				type: 1,
				count: 0,
				currentTitle: "",
				left: "0",
				right: "auto",
				bottom: "30rpx",
				width: "16rpx",
				height: "16rpx",
				radius: "50%",
				backgroundColor: "#bfbfbf",
				activeBgColor: "#5677fc",
				color: "#333",
				activeColor: "#fff",
				size: 28,
				margin: "0 8rpx",
				padding: "0 30rpx",
				titleArr: ["内容A", "内容B", "欢迎体验ThorUI示例，希望可以带给你不一样的收获！"]
			}
		},
		onLoad() {
			this.count = this.background.length;
			this.currentTitle = this.titleArr[0]
		},
		methods: {
			bannerChange: function(e) {
				this.current = e.detail.current;
				this.currentTitle = this.titleArr[this.current]
			},
			radioChange(e) {
				//单位可填写rpx
				let index = Number(e.detail.value)
				switch (index) {
					case 0:
						this.type = 1;
						this.width = "10px";
						this.height = "4px";
						this.radius = "4px"
						this.bottom = "30rpx";
						break;
					case 1:
						this.type = 1;
						this.width = "10px";
						this.height = "4px";
						this.radius = "0"
						this.bottom = "30rpx";
						break;
					case 2:
						this.type = 3;
						this.width = "100%";
						this.height = "74rpx";
						this.bottom = "0";
						this.backgroundColor = "rgba(0,0,0,0.4)";
						this.color = "#fff";
						this.size=30;
						this.currentTitle = this.titleArr[this.current]
						break;
					case 3:
						this.type = 2;
						this.width = "44rpx";
						this.height = "44rpx";
						this.size=26
						this.bottom = "30rpx";
						this.color = "#fff";
						this.radius="50%";
						break;
					case 4:
					    this.type = 4;
						this.right="0";
						this.width="72rpx";
						this.height="44rpx";
						this.backgroundColor = "rgba(0,0,0,0.4)";
						this.color = "#fff";
						this.radius="120rpx 0 0 120rpx";
						this.bottom = "30rpx";
						this.size=24;
						break;
					case 5:
					    this.backgroundColor = "rgba(247,77,84,.4)";
						this.activeBgColor="#f74d54"
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	.tui-swiper-item {
		width: 100%;

		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
	}

	.tui-banner__height {
		height: 360rpx;
	}

	.tui-bg__primary {
		background-color: rgba(0, 0, 0, .8);
	}

	.tui-bg__green {
		background-color: #07c160;
	}

	.tui-bg__white {
		background-color: #F2F2F2;
		color: #000;
	}

	.tui-banner-swiper {
		position: relative;
	}

	.thorui-flex__between {
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}
</style>
